<template>
  <div>
      <el-select v-model="myvalue" filterable remote :remote-method="filterMethodSqlSingle" placeholder="商品" :style="{width:width}" clearable @clear="TableClear" ref="refinvitemddl" @visible-change="selectFocus" :keydisabled="false" :border="true">
          <el-option :value="TableRowValue" :label="TableRowValue" style="padding:0;height:auto;width:100%;">
              <div class="table-content">
                  <el-table :data.sync="options" style="width: 100%" keyVisiable="false" @row-click="RowClick" highlight-current-row ref="selectTable" @current-change="tableRowSelect">
                      <!-- <el-table-column prop="id" label="NO." width="40"></el-table-column> -->
                      <el-table-column prop="itemname" label="项目名称" width="180" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="spec" label="规格" width="120" header-align="center" :show-overflow-tooltip="true"> </el-table-column>
                      <el-table-column prop="unit" label="采购单位" width="70" align="center"></el-table-column>
                      <el-table-column prop="miniunit" label="最小单位" width="70" align="center"> </el-table-column>
                      <el-table-column prop="itemgroupname" label="商品组" width="90" :show-overflow-tooltip="true"></el-table-column>
                      <!-- <el-table-column prop="vendorid" label="供应商" width="115" sortable></el-table-column>-->
                      <el-table-column prop="itemcode" label="项目代码" width="90"></el-table-column>
                      <!-- <el-table-column prop="itemid" label="项目ID" width="60" sortable></el-table-column> -->
                  </el-table>
              </div>
          </el-option>
      </el-select>
  </div>
</template>
<script>
import XEUtils from "xe-utils";
export default {
  props: { width: { type: String }, value: { type: String }, vendorid: { type: [Number, String] }, keyid: { type: String }, itemgroupid: { type: [Number, String] } },
  data() {
      return {
          AllOptions: [],
          options: [],
          TableRowValue: this.value,
          myvalue: this.value,
          selectRow: {},
          sureflag: false,
      };
  },
  computed: {},
  updated() {
      this.myvalue = this.value;
  },
  created() {
      this.loadData(); //初始化主列表
  },
  watch: {
      options: function () {
          this.$nextTick(function () {
              this.$refs.selectTable.setCurrentRow(this.options[0]);
          });
      },
  },
  mounted() {},
  methods: {
      loadData: function () {
          if (!this.vendorid && !this.itemgroupid) {
              let ccdata = null;
              let comdata = this.$ddldata.common_data;
              if (comdata) {
                  let dlldataitem = comdata.find((t) => t.key == "InvItemTable");
                  if (dlldataitem && dlldataitem.val) {
                      ccdata = XEUtils.clone(dlldataitem.val, true);
                  } else {
                      ccdata = null;
                  }
              }
              if (!ccdata) {
                  this.GetInvitem2Data("", "")
                      .then((res) => {
                          res.data.forEach((element, idnum) => {
                              element.id = idnum++;
                          });
                          try {
                              this.$ddldata.common_data.push({ key: "InvItemTable", val: res.data });
                          } catch (e) {}
                          ccdata = res.data;
                          // this.AllOptions = XEUtils.clone(ccdata, true);
                          // this.options = XEUtils.clone(ccdata, true);
                          this.realGetData(ccdata);
                      })
                      .catch((e) => {});
              } else {
                  // this.AllOptions = XEUtils.clone(ccdata, true);
                  // this.options = XEUtils.clone(ccdata, true);
                  this.realGetData(ccdata);
              }
          } else {
              this.GetInvitem2Data(this.vendorid, this.itemgroupid)
                  .then((res) => {
                      res.data.forEach((element, idnum) => {
                          element.id = idnum++;
                      });
                      // this.AllOptions = res.data;
                      // this.options = res.data;
                      this.realGetData(res.data);
                  })
                  .catch((e) => {
                      this.$alert(e, "出错");
                  });
          }
      },
      realGetData(data) {
          this.AllOptions = XEUtils.clone(data, true);
          this.sliceData();
      },
      sliceData() {
          if (this.AllOptions.length >= 200) {
              this.options = XEUtils.slice(this.AllOptions, 0, 200); //XEUtils.clone(ccdata, true);
          } else {
              this.options = XEUtils.slice(this.AllOptions, 0, this.AllOptions.length); //XEUtils.clone(ccdata, true);
          }
      },
      GetInvitem2Data(vendorid, itemgroupid) {
          return this.$tool.request({
              url: "ucent/ddl",
              method: "post",
              data: {
                  action: "invitem2",
                  vendorid: vendorid,
                  itemgroupid: itemgroupid,
              },
          });
      },
      filterMethodSqlSingle(query) {
          if (query) {
              //val存在
              // console.log(this.$refs.selectTable);
              this.options = this.AllOptions.filter((item) => {
                  if (!!~item.itemname.indexOf(query) || !!~item.itemcode.toUpperCase().indexOf(query.toUpperCase()) || (item.inputcode.toUpperCase() ? !!~item.inputcode.toUpperCase().indexOf(query.toUpperCase()) : false)) {
                      return true;
                  }
              });
              this.options.forEach((element, idnum) => {
                  element.id = idnum++;
              });
          } else {
              //val为空时，还原数组
              //this.options = this.AllOptions;
              //只显示前200条数据

              //this.options = XEUtils.slice(this.AllOptions, 0, 200);
              this.sliceData();
          }
      },
      RowClick(row, column, event) {
          if (!row) return false;
          this.myvalue = row.itemname;
          this.TableRowValue = row.itemname;
          this.$nextTick(() => {
              this.selectRow = row;
              this.$refs.selectTable.setCurrentRow(row);
              this.$emit("change", row, this.keyid);
              //this.options = XEUtils.clone(this.AllOptions, true);
          });
      },
      TableClear() {
          this.myvalue = "";
          //this.options = XEUtils.slice(this.AllOptions, 0, 200);
          this.sliceData();
          this.selectRow = {};
          this.$emit("change", "", this.keyid);
      },
      selectFocus(e) {
          var that = this;
          if (e) {
              setTimeout(() => {
                  if (that.$refs.selectTable) {
                      let bodyWrapper = that.$refs.selectTable.$el;
                      if (!that.selectRow.id) {
                          bodyWrapper.scrollTop = 0;
                      } else {
                          bodyWrapper.scrollTop = this.selectRow.id * 30;
                      }
                  }
              }, 10);
          } else {
              setTimeout(() => {
                  // this.options = XEUtils.clone(this.AllOptions, true);
                  //this.options = XEUtils.slice(this.AllOptions, 0, 200);
                  this.sliceData();
              }, 10);
          }
      },
      tableRowSelect(e) {
          var that = this;
          if (e) {
              setTimeout(() => {
                  if (that.$refs.selectTable) {
                      let bodyWrapper = that.$refs.selectTable.$el;
                      bodyWrapper.scrollTop = Math.floor(e.id / 7) * 210;
                  }
              }, 100);
          }
      },
  },
};
</script>
<style scoped>
::v-deep.el-table__body tr.current-row > td {
  background-color: #67aaf6;
  color: white;
}
.el-select-dropdown__item.selected {
  font-weight: normal;
}
.el-table {
  color: #131414;
}
.table-content {
  height: 245px;
}
::v-deep .table-content .el-table {
  height: 100%;
  overflow-y: auto;
}
::v-deep .table-content .el-table th {
  line-height: 23px !important;
}
::v-deep .el-table .cell {
  padding: 0 5px;
}
</style>
